import { DemoBlock } from 'demos'
import { Button, Modal } from 'grace-design'
import React, { useState } from 'react'

export default () => {
  const [open, setOpen] = useState(false)
  const [visible, setVisible] = useState(false)

  return (
    <>
      <DemoBlock title="模态框">
        <Button
          onClick={() => {
            setOpen(true)
          }}
        >
          打开模态框
        </Button>
        <Modal
          open={open}
          onClose={() => {
            setOpen(false)
          }}
          message="这是模态框"
        />
      </DemoBlock>

      <DemoBlock title="不同取消/确认文本模态框">
        <Button
          onClick={() => {
            setVisible(true)
          }}
        >
          打开模态框
        </Button>
        <Modal
          open={visible}
          onClose={() => {
            setVisible(false)
          }}
          message="这是不同取消/确认的文本模态框"
          cancelText="左边"
          confirmText="右边"
        />
      </DemoBlock>
    </>
  )
}
